<template>
    <div>
        <div class="thead">评论列表
    </div>
        <div class="box">
            <div class="top_box">
                <ul class="section_01">
                    <li class="nav01">评论内容</li>
                    <li class="nav02">评论人</li>
                    <li class="nav03">活动标题</li>
                    <li class="nav04">活动评分</li>
                    <li class="nav05">服务评分</li>
                    <li class="nav06">评论时间</li>
                    <li class="nav07">操作</li>
                </ul>
             </div>
             <div class="next_box">
               <div v-if="list.length == 0" style="height:60px;line-height:60px;text-align:center;border:1px solid #ccc;">
                 暂无数据
               </div>
                <ul
                    v-else
                    class="section_02"
                    v-for="( item, index ) in list"
                    :key="item.id"
                    >
                    <li class="line01">{{ item.content }}</li>
                    <li class="line02">{{ item.nick_name }}</li>
                    <li class="line03">{{ item.activity_title }}</li>
                    <li class="line04">
                        
                        <img
                            src="../../images/main/start.png"
                            v-for="( item, index ) in item.activity_comment"
                        />
                    </li>
                    <li class="line05">

                        <p>老师业务:
                            <img
                                src="../../images/main/start.png"
                                v-for="( item, index ) in item.teacher_comment"
                            />
                        </p>
                        <p>教室环境:
                            <img
                                src="../../images/main/start.png"
                                v-for="( item, index ) in item.room_comment"
                            />
                        </p>
                        <p>店员服务:
                            <img
                                src="../../images/main/start.png"
                                v-for="( item, index ) in item.service_comment"
                            />
                        </p>
                    </li>
                    <li class="line06">
                        <p>{{setDate(item.time)}}</p>
                        <p>{{setTime(item.time)}}</p>
                    </li>
                    <li class="line07">
                        <a v-if="roleList.search('活动管理') != '-1'"   @click="deleteComment( item )">删除</a>
                    </li>
                </ul>
             </div>
        </div>

        <div style="text-align: center;padding: 50px 0;">
          <el-pagination
            background
            layout="prev, pager, next"
            @current-change="changePage"
            :page-count="pageTotal">
          </el-pagination>
        </div>
    </div>
</template>
<script>
import Global from "../tool/Global.vue";
import axios from "axios";
import qs from "qs";
export default {
    name: 'commentList',
    created (){
        this.getList();
        this.getRole()
    },
    data () {
        return {
            pageTotal: 1,
            list: [],
            param: {
                page: 1,
                limit: 10
            },
            roleList:''
        }
    },
    methods: {
        /**
     *  获取权限
     */
    getRole: function () {
      
      let that = this;
      axios({
          method: 'post',
          url:`${that.$store.state.url}/sysPermission/selectByEmployeeId`,
            data:qs.stringify({
              empId:that.$cookie.get('pid')
            })
      }).then(res => {
            console.log(res)
            let arr = res.data.data
            let role = []
            for(let i = 0; i < arr.length; i++) {
              role.push(arr[i].name) 
            }
            this.roleList = role.toString()
        });
    },
        changePage( argv ) {
            this.param.page = argv;
            this.getList();
        },
        getList() {
            axios.post (
                `${this.$store.state.url}/comment/selectListComment`,
            ).then ( response => {
                let res = response.data;
                if ( res.code == 0 ) {
                    this.pageTotal = Math.ceil ( res.count / 10 );
                    this.list = res.data;
                }
            });
        },
        deleteComment( item ) {
          this.$confirm('是否删除当前评论，删除后前台评论会同步删除').then( ()=>{
axios.post (
                `${this.$store.state.url}/comment/delComment`,
                qs.stringify ({
                    id: item.id
                })
            ).then ( response => {
                let res = response.data;
                if ( res.code == 0 ) {
                    this.$alert ( '删除成功' ).then (() => {
                        this.getList();
                    });
                }
            });
          })
            
        },
        /*
     * 根据时间毫秒数 返回年月日
     */
    setDate: function(str) {
      let times = new Date(str);
      return `${times.getFullYear()}-${
        times.getMonth()+1 < 10 ? "0" + (times.getMonth() + 1) : times.getMonth() + 1
      }-${times.getDate() < 10 ? "0" + times.getDate() : times.getDate()}`;
    },
    /**
     * 根据时间毫秒数 返回时分秒
     */
    setTime: function(str) {
      let times = new Date(str);
      return `${
        times.getHours() < 10 ? "0" + times.getHours() : times.getHours()
      }:${
        times.getMinutes() < 10 ? "0" + times.getMinutes() : times.getMinutes()
      }:${
        times.getSeconds() < 10 ? "0" + times.getSeconds() : times.getSeconds()
      }`;
    }
    }
}
</script>
<style scoped>
.thead {
  text-align: left;
  font-family: PingFangSC-Medium;
  font-size: 18px;
  color: #000000;
  height: 69px;
  line-height: 69px;
  padding-left: 15px;
  background: #f6f6f6;
  border: 1px solid #dddddd;
  box-sizing: border-box;
  font-weight: bold;
  /* margin-left: 26px; */
  /* width: 1488px; */
}
.box {
  background: #ffffff;
  border: 1px solid #dddddd;
  box-shadow: 0 2px 4px 0 #dddddd;
  box-sizing: border-box;
  /* width:1488px; */
  /* display: inline-block; */
  overflow: hidden;
  /* margin-left: 26px; */
  margin-top: 25px;
}
.top_box {
  background: #b7cde6;
  border-bottom: 1px solid #dddddd;
  width: 100%;
  overflow: hidden;
}
.section_01 {
  overflow: hidden;
}
.top_box .section_01 li {
  font-family: PingFangSC-Medium;
  font-size: 20px;
  color: #000000;
  letter-spacing: 0.03px;
  line-height: 67px;
  float: left;
  list-style: none;
  text-align: center;
  border-right: 1px solid #dddddd;
  box-sizing: border-box;
  font-weight: bold;
}
.section_01 .nav01 {
  /* width: 266px; */
  width: 14%;
}
.section_01 .nav02 {
  /* width: 174px; */
  width: 10%;
}
.section_01 .nav03 {
  /* width: 187px; */
  width: 18%;
}
.section_01 .nav04 {
  /* width: 223px; */
  width: 14%;
}
.section_01 .nav05 {
  /* width: 244px; */
  width: 20%;
}
.section_01 .nav06 {
  /* width: 191px; */
  width: 14%;
}
.section_01 .nav07 {
  /* width: 193px; */
  width: 10%;
}
.section_01 li:last-child {
  border-right: 0;
}
.next_box {
  width: 100%;
  overflow: hidden;
}
.section_02 {
  height: calc(818px / 5);
  border-bottom: 1px solid #dddddd;
  overflow: hidden;
}
.section_02:last-child {
  border-bottom: 0;
}
.section_02 li {
  font-family: PingFangSC-Medium;
  font-size: 18px;
  color: #4a4a4a;
  letter-spacing: 0.03px;
  height: calc(818px / 5);
  float: left;
  list-style: none;
  border-right: 1px solid #dddddd;
  box-sizing: border-box;
  text-align: center;
  /*line-height: calc(818px / 5);*/

  
  word-break: break-all;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}
.section_02 li:last-child {
  border-right: 0;
}


.section_02 .line01 {
  /* width: 266px; */
  width: 14%;
}
.section_02 .line02 {
  /* width: 174px; */
  width: 10%;
}
.section_02 .line03 {
  /* width: 187px; */
  width: 18%;
  line-height: 26px;
  /*padding-top: 58px;*/
}
.section_02 .line04 {
  /* width: 223px; */
  width: 14%;
}
.section_02 img {
  width: 20px;
  height: 20px;
}
.section_02 .line05 {
  /* width: 244px; */
  width: 20%;
  line-height: 26px;
  display: block;
  padding-top: 38px;
  font-size: 16px;
}
.section_02 .line06 {
  /* width: 191px; */
  width: 14%;
  line-height: 26px;
  /*padding-top: 65px;*/
  font-size: 14px;
  display: block;
  padding-top: 60px;
}
.section_02 .line07 {
  /* width: 193px; */
  width: 10%;
}
.section_02 .line07 a {
  font-family: PingFangSC-Medium;
  font-size: 20px;
  color: #085dab;
  letter-spacing: 0;
  text-align: left;
  text-decoration: none;
}
</style>
